<template>
  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
    <template v-for="item in toolbarItemList" :key="item.type">
      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
        <template #title>{{ item.tooltip }}</template>
        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
          <Icon
            :icon="item.icon"
            :class="item.disabled ? 'cursor-not-allowed disabled' : 'cursor-pointer'"
          />
        </span>
      </Tooltip>
      <Divider v-if="item.separate" type="vertical" />
    </template>
  </div>
</template>
<script lang="ts" setup>
  import type { ToolbarConfig } from './types';

  import { ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
  import { Divider, Tooltip } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';

  import { useFlowChartContext } from './useFlowContext';
  import { ToolbarTypeEnum } from './enum';

  defineOptions({ name: 'FlowChartToolbar' });

  defineProps({
    prefixCls: String,
  });

  const emit = defineEmits(['view-data']);

  const toolbarItemList = ref<ToolbarConfig[]>([
    {
      type: ToolbarTypeEnum.ZOOM_IN,
      icon: 'codicon:zoom-out',
      tooltip: '缩小',
    },
    {
      type: ToolbarTypeEnum.ZOOM_OUT,
      icon: 'codicon:zoom-in',
      tooltip: '放大',
    },
    {
      type: ToolbarTypeEnum.RESET_ZOOM,
      icon: 'codicon:screen-normal',
      tooltip: '重置比例',
    },
    { separate: true },
    {
      type: ToolbarTypeEnum.UNDO,
      icon: 'ion:arrow-undo-outline',
      tooltip: '后退',
      disabled: true,
    },
    {
      type: ToolbarTypeEnum.REDO,
      icon: 'ion:arrow-redo-outline',
      tooltip: '前进',
      disabled: true,
    },
    { separate: true },
    {
      type: ToolbarTypeEnum.SNAPSHOT,
      icon: 'ion:download-outline',
      tooltip: '下载',
    },
    {
      type: ToolbarTypeEnum.VIEW_DATA,
      icon: 'carbon:document-view',
      tooltip: '查看数据',
    },
  ]);

  const { logicFlow } = useFlowChartContext();

  function onHistoryChange({ data: { undoAble, redoAble } }) {
    const itemsList = unref(toolbarItemList);
    const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
    const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
    if (undoIndex !== -1) {
      unref(toolbarItemList)[undoIndex].disabled = !undoAble;
    }
    if (redoIndex !== -1) {
      unref(toolbarItemList)[redoIndex].disabled = !redoAble;
    }
  }

  const onControl = (item) => {
    const lf = unref(logicFlow);
    if (!lf) {
      return;
    }
    switch (item.type) {
      case ToolbarTypeEnum.ZOOM_IN:
        lf.zoom();
        break;
      case ToolbarTypeEnum.ZOOM_OUT:
        lf.zoom(true);
        break;
      case ToolbarTypeEnum.RESET_ZOOM:
        lf.resetZoom();
        break;
      case ToolbarTypeEnum.UNDO:
        lf.undo();
        break;
      case ToolbarTypeEnum.REDO:
        lf.redo();
        break;
      case ToolbarTypeEnum.SNAPSHOT:
        lf.getSnapshot();
        break;
      case ToolbarTypeEnum.VIEW_DATA:
        emit('view-data');
        break;
    }
  };

  watchEffect(async () => {
    if (unref(logicFlow)) {
      await nextTick();
      unref(logicFlow)?.on('history:change', onHistoryChange);
    }
  });

  onUnmounted(() => {
    unref(logicFlow)?.off('history:change', onHistoryChange);
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';

  html[data-theme='dark'] {
    .lf-dnd {
      background: #080808;
    }
  }
  .@{prefix-cls} {
    height: 36px;
    border-bottom: 1px solid @border-color-base;
    background-color: @app-content-background;

    .disabeld {
      color: @disabled-color;
    }

    &__icon {
      display: inline-block;
      margin-right: 10px;
      padding: 2px 4px;

      &:hover {
        color: @primary-color;
      }
    }
  }
</style>
